<template>
  <div class="denglu">
      <div class="touxiang">

      </div>
      <div class="mingcheng"  @click="showPopup">
           <h5>立即登录</h5>
           <p>登录享受更多专属特权</p>
      </div>
      <p class="zcbu" @click="showPopup1">立即注册</p>
      <van-popup v-model="show" position="bottom" :style="{ height: '80%' }">
          <Dlzc/>
      </van-popup>
      <van-popup v-model="show1" position="bottom" :style="{ height: '80%' }">
          <Dlzc1/>
      </van-popup>
  </div>
</template>

<script>
import Dlzc from '@/components/my/dlzc.vue'
import Dlzc1 from '@/components/my/dlzc1.vue'
export default {
   components:{
      Dlzc,
      Dlzc1
    },
     data() {
    return {
      show: false,
      show1:false
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
    showPopup1() {
      this.show1 = true;
    },
  },
}
</script>

<style scoped>
.denglu{
    display: flex;
    align-items: center;
    padding-left: .2rem;
    min-height: 1rem;
}
   .touxiang{
       width: .5rem;
       height: .5rem;
       border-radius: 50%;
       background-color: gray;
   }
   .mingcheng{
       margin-left: .2rem;
   }
   .zcbu{
       margin-left: .5rem;
   }
</style>